<template>
  <view class="page">
    <navbar/>
    <view class="recover-box">
      <view v-for="(item,index) in list" :key="index" class="box" @click="clickJump">
        <view class="title">
          <u-icon name="minus-square-fill" color="#1762f2"/>
          {{ item.title }}
        </view>
        <view class="detile">
          <u-col span="6">受益人：{{ item.beneficiary }}</u-col>
          <u-col span="6">垫资人：{{ item.funder }}</u-col>
        </view>
        <view class="detile">
          <u-col span="6">时间：{{ item.time }}</u-col>
          <u-col span="6">
            <view style="display:flex">金额：<span>{{ item.price }}元</span></view>
          </u-col>
        </view>
        <view class="state">{{ item.state }}</view>
      </view>
      <view style="margin-top:50px;">
        <u-button type="primary" shape="circle" size="large" @click="handleCreate">
          <u-icon
            name="edit-pen" color="#fff" size="22"/>
          添加报销
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Recoverable',
  data() {
    return {
      list: [{
        title: '买电视',
        time: '2023-03-06',
        price: 2600,
        beneficiary: '林源',
        funder: '林源',
        state: '未报销'
      },
      {
        title: '房租',
        time: '2023-03-06',
        price: 2600,
        beneficiary: '林源',
        funder: '林源',
        state: '未报销'
      },
      {
        title: '农行销户',
        time: '2023-03-06',
        price: 2600,
        beneficiary: '林源',
        funder: '林源',
        state: '未报销'
      }
      ]

    }
  },
  methods: {
    handleCreate() {
      uni.navigateTo({
        url: '/pages/recoverable/recoverableForm'
      })
    },
    clickJump() {
      uni.navigateTo({
        url: '/pages/recoverable/recoverableDetails'
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.recover-box {
  margin: 15px;

  .box {
    background: #F3F5F8;
    border-radius: 6px;
    position: relative;
    padding: 15px;
    margin-bottom: 16px;

    .title {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 2px;
      margin-bottom: 10px;
    }

    .detile {
      display: flex;
      margin-bottom: 10px;

      span {
        color: #1762F2;
      }
    }

    .state {
      background: #D34D25;
      border-radius: 0px 6px 0px 6px;
      width: 24px;
      height: 58px;
      font-size: 10px;
      font-weight: 600;
      color: #FFFFFF;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      writing-mode: tb-rl;
      line-height: 24px;
    }
  }
}
</style>
